<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>动态组件</title>
	<link rel="stylesheet" type="text/css" href="source/tree/tree.css">
</head>
<body>
	<div id="app">
        <input type="button" value="切换到第一个组件" @click="tab(1)">
        <input type="button" value="切换到第二个组件" @click="tab(2)">
        <input type="button" value="切换到第三个组件" @click="tab(3)">
        <keep-alive> <component :is="current"></component> </keep-alive>
    </div>
</body>
</html>
<script src="../../2.1.8/vue.js"></script>
<script>
    /* 动态组件 
       (1) 动态数据使用 v-bind 指令绑定数据  
       (2) 使用任意自定义标签，作为扩展标签均可以
       (3) keep-alive : 将操作的保存在内存中，主要报错操作状态
    */
    var com1 = Vue.component('custom1',{
        template : `<div @click="changeBg">我是第 1 个组件</div>`,
        methods : {
            changeBg(e){ // 默认参数是 e事件对象
                e.target.style.background = 'red';
            }
        }
    });
    var com2 = Vue.component('custom2',{
        template : `<div @click="changeBg">我是第 2 个组件</div>`,
        methods : {
            changeBg(e){
                e.target.style.background = 'green';
            }
        }
    });
    var com3 = Vue.component('custom3',{
        template : `<div @click="changeBg">我是第 3 个组件</div>`,
        methods : {
            changeBg(e){
                e.target.style.background = 'blue';
            }
        }
    });

    let arr = [ com1, com2, com3 ];
    let vm = new Vue({
        el : '#app',
        data : {
            current : com1
        },
        methods : {
            tab(i){
                this.current = arr[i-1];
            }
        }
    });
</script>